<template>
    <!-- 左侧功能操作区 -->
    <Operation />
    
    <!-- 中间3D画布区 -->
    <div class="flex-1 flex flex-col bg-[#0f0f0f] relative">
        <!-- 画布工具栏 -->
        <div class="flex items-center justify-between px-6 py-3 bg-[#1a1a1a] border-b border-gray-700">
            <!-- 左侧工具 -->
            <div class="flex items-center space-x-3">
                <div class="flex items-center space-x-2 text-gray-300">
                    <el-icon><Box /></el-icon>
                    <span class="text-sm font-medium">3D 视窗</span>
                </div>
                
                <!-- 视图控制 -->
                <div class="flex items-center space-x-1 ml-6">
                    <el-button size="small" :class="viewMode === 'perspective' ? '!bg-blue-500 !border-blue-500' : '!bg-gray-600 !border-gray-600'" 
                        @click="viewMode = 'perspective'">
                        <span class="text-xs">透视</span>
                    </el-button>
                    <el-button size="small" :class="viewMode === 'orthographic' ? '!bg-blue-500 !border-blue-500' : '!bg-gray-600 !border-gray-600'" 
                        @click="viewMode = 'orthographic'">
                        <span class="text-xs">正交</span>
                    </el-button>
                </div>
            </div>

            <!-- 右侧控制按钮 -->
            <div class="flex items-center space-x-2">
                <el-button size="small" class="!bg-gray-600 !border-gray-600" @click="resetView">
                    <el-icon><Refresh /></el-icon>
                    <span class="text-xs ml-1">重置视角</span>
                </el-button>
                <el-button size="small" class="!bg-gray-600 !border-gray-600" @click="toggleWireframe">
                    <span class="text-xs">{{ showWireframe ? '实体' : '线框' }}</span>
                </el-button>
                <el-button size="small" class="!bg-gray-600 !border-gray-600" @click="toggleGrid">
                    <el-icon><Grid /></el-icon>
                </el-button>
            </div>
        </div>

        <!-- 主画布区域 -->
        <div class="flex-1 relative">
            <!-- 3D画布 -->
            <canvas 
                ref="canvasRef" 
                class="w-full h-full cursor-move"
                @mousedown="handleMouseDown"
                @mousemove="handleMouseMove"
                @mouseup="handleMouseUp"
                @wheel="handleWheel"
            ></canvas>

            <!-- 空状态显示 -->
            <div v-if="!result && !isGenerating" 
                class="absolute inset-0 flex items-center justify-center pointer-events-none">
                <div class="text-center">
                    <div class="mb-8">
                        <div class="w-32 h-32 mx-auto mb-6 rounded-2xl bg-gradient-to-br from-gray-700 to-gray-800 flex items-center justify-center">
                            <el-icon class="text-6xl text-gray-500">
                                <Box />
                            </el-icon>
                        </div>
                        <h2 class="text-3xl font-bold mb-4">
                            <span class="text-blue-500">3D</span>
                            <span class="bg-gradient-to-r from-orange-400 to-orange-600 bg-clip-text text-transparent">Canvas</span>
                        </h2>
                        <p class="text-gray-400 text-lg leading-relaxed">
                            在左侧面板开始创建您的3D模型<br />
                            生成后将在此画布中展示
                        </p>
                    </div>

                    <!-- 快捷操作提示 -->
                    <div class="grid grid-cols-3 gap-4 max-w-md mx-auto text-sm text-gray-500">
                        <div class="flex flex-col items-center p-3 bg-gray-800/50 rounded-lg">
                            <div class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center mb-2">
                                <span class="text-xs font-mono">🖱️</span>
                            </div>
                            <span>拖拽旋转</span>
                        </div>
                        <div class="flex flex-col items-center p-3 bg-gray-800/50 rounded-lg">
                            <div class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center mb-2">
                                <span class="text-xs font-mono">⚡</span>
                            </div>
                            <span>滚轮缩放</span>
                        </div>
                        <div class="flex flex-col items-center p-3 bg-gray-800/50 rounded-lg">
                            <div class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center mb-2">
                                <span class="text-xs font-mono">⌘</span>
                            </div>
                            <span>快捷操作</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 生成中状态 -->
            <div v-if="isGenerating" 
                class="absolute inset-0 flex items-center justify-center bg-black/20 backdrop-blur-sm">
                <div class="text-center bg-[#1a1a1a] p-8 rounded-2xl border border-gray-700">
                    <div class="mb-6">
                        <el-icon class="animate-spin text-blue-500 text-6xl">
                            <Loading />
                        </el-icon>
                    </div>
                    <div class="text-xl text-gray-300 mb-2">正在生成3D模型...</div>
                    <div class="text-gray-500 mb-4">预计需要 30-60 秒</div>
                    <div class="w-64 mx-auto">
                        <el-progress :percentage="generateProgress" :show-text="false" class="custom-progress" />
                    </div>
                </div>
            </div>

            <!-- 画布信息面板 -->
            <div class="absolute top-4 left-4 bg-black/60 backdrop-blur-sm rounded-lg p-3 text-sm text-gray-300">
                <div class="flex items-center space-x-4">
                    <div>视角: {{ viewMode === 'perspective' ? '透视' : '正交' }}</div>
                    <div v-if="result">面数: {{ model.faces }}</div>
                    <div>缩放: {{ Math.round(zoomLevel * 100) }}%</div>
                </div>
            </div>

            <!-- 画布坐标轴 -->
            <div v-if="showGrid" class="absolute bottom-4 left-4 bg-black/60 backdrop-blur-sm rounded-lg p-3">
                <div class="flex items-center space-x-3 text-xs">
                    <div class="flex items-center space-x-1">
                        <div class="w-3 h-0.5 bg-red-500"></div>
                        <span class="text-red-400">X</span>
                    </div>
                    <div class="flex items-center space-x-1">
                        <div class="w-3 h-0.5 bg-green-500"></div>
                        <span class="text-green-400">Y</span>
                    </div>
                    <div class="flex items-center space-x-1">
                        <div class="w-3 h-0.5 bg-blue-500"></div>
                        <span class="text-blue-400">Z</span>
                    </div>
                </div>
            </div>

            <!-- 模型操作面板 -->
            <div v-if="result" class="absolute top-4 right-4 bg-black/60 backdrop-blur-sm rounded-lg p-3">
                <div class="flex flex-col space-y-2">
                    <el-button size="small" class="!bg-blue-500 !border-blue-500" @click="previewModel">
                        <el-icon><View /></el-icon>
                        <span class="text-xs ml-1">预览</span>
                    </el-button>
                    <el-button size="small" class="!bg-green-500 !border-green-500" @click="downloadModel">
                        <el-icon><Download /></el-icon>
                        <span class="text-xs ml-1">下载</span>
                    </el-button>
                    <el-button size="small" class="!bg-purple-500 !border-purple-500" @click="shareModel">
                        <el-icon><Share /></el-icon>
                        <span class="text-xs ml-1">分享</span>
                    </el-button>
                </div>
            </div>
        </div>

        <!-- 底部状态栏 -->
        <div class="px-6 py-2 bg-[#1a1a1a] border-t border-gray-700 flex items-center justify-between text-xs text-gray-400">
            <div class="flex items-center space-x-4">
                <span>WebGL {{ webglVersion }}</span>
                <span v-if="result">顶点: {{ model.vertices }}</span>
                <span v-if="result">{{ model.name }}</span>
            </div>
            <div class="flex items-center space-x-4">
                <span>FPS: {{ fps }}</span>
                <div class="flex items-center space-x-1">
                    <div class="w-2 h-2 rounded-full bg-green-500"></div>
                    <span>就绪</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 右侧历史记录区 -->
    <div class="w-[300px] bg-[#1a1a1a] p-6">
        <div class="mb-4 flex items-center justify-between">
            <h3 class="text-white font-medium">生成历史</h3>
            <el-button size="small" text class="!text-blue-500">
                <el-icon><Refresh /></el-icon>
            </el-button>
        </div>

        <div class="space-y-3">
            <div v-for="(history, index) in generationHistory" :key="index"
                class="bg-gray-800 rounded-lg p-3 cursor-pointer hover:bg-gray-700 transition-colors group"
                @click="loadHistoryModel(history)">
                <div class="flex items-center space-x-3">
                    <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-500 rounded-lg flex items-center justify-center">
                        <el-icon class="text-white">
                            <Box />
                        </el-icon>
                    </div>
                    <div class="flex-1">
                        <div class="text-white text-sm font-medium truncate">{{ history.name }}</div>
                        <div class="text-gray-400 text-xs">{{ history.time }}</div>
                        <div class="text-gray-500 text-xs">{{ history.type }}</div>
                    </div>
                    <div class="opacity-0 group-hover:opacity-100 transition-opacity">
                        <el-icon class="text-gray-400 hover:text-white cursor-pointer">
                            <View />
                        </el-icon>
                    </div>
                </div>
            </div>
        </div>

        <div v-if="!generationHistory.length" class="text-center text-gray-500 py-8">
            <svg t="1758528289013" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                p-id="9470" width="64" height="64">
                <path
                    d="M349.141333 128a128 128 0 0 1 93.013334 40.106667l75.434666 79.786666a128 128 0 0 0 93.013334 40.106667H810.666667a128 128 0 0 1 128 128V768a128 128 0 0 1-128 128H213.333333a128 128 0 0 1-128-128V256a128 128 0 0 1 128-128h135.808zM213.333333 192a64 64 0 0 0-64 64v512a64 64 0 0 0 64 64h597.333334a64 64 0 0 0-64-64h-200.042667a192 192 0 0 1-139.562667-60.16l-75.413333-79.786667a64 64 0 0 0-46.506667-20.053333H213.333333z"
                    fill="currentColor" p-id="9471"></path>
            </svg>
            <div class="text-sm">暂无生成记录</div>
        </div>
    </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import Operation from './component/WorkBench.vue'
import { useGenerator } from '@/hook/useGenerator'

const { result, isGenerating, generateProgress } = useGenerator()

// 画布相关
const canvasRef = ref(null)
const viewMode = ref('perspective') // 'perspective' | 'orthographic'
const showWireframe = ref(false)
const showGrid = ref(true)
const zoomLevel = ref(1)
const fps = ref(60)
const webglVersion = ref('2.0')

// 模型数据
const model = ref({
    name: '生成的3D模型',
    faces: '50,000',
    vertices: '25,000'
})

// 鼠标交互状态
const isDragging = ref(false)
const lastMouseX = ref(0)
const lastMouseY = ref(0)

// 生成历史
const generationHistory = ref([
    {
        id: 1,
        name: '可爱橘猫模型',
        time: '10分钟前',
        type: '文生3D'
    },
    {
        id: 2,
        name: '机器人战士',
        time: '1小时前',
        type: '图生3D'
    }
])

// ========== 画布控制方法 ==========
const resetView = () => {
    zoomLevel.value = 1
    console.log('Reset view')
}

const toggleWireframe = () => {
    showWireframe.value = !showWireframe.value
    console.log('Toggle wireframe:', showWireframe.value)
}

const toggleGrid = () => {
    showGrid.value = !showGrid.value
    console.log('Toggle grid:', showGrid.value)
}

// ========== 鼠标交互方法 ==========
const handleMouseDown = (event) => {
    isDragging.value = true
    lastMouseX.value = event.clientX
    lastMouseY.value = event.clientY
}

const handleMouseMove = (event) => {
    if (!isDragging.value) return
    
    const deltaX = event.clientX - lastMouseX.value
    const deltaY = event.clientY - lastMouseY.value
    
    // 这里添加3D模型旋转逻辑
    console.log('Rotate model:', deltaX, deltaY)
    
    lastMouseX.value = event.clientX
    lastMouseY.value = event.clientY
}

const handleMouseUp = () => {
    isDragging.value = false
}

const handleWheel = (event) => {
    event.preventDefault()
    const delta = event.deltaY > 0 ? 0.9 : 1.1
    zoomLevel.value = Math.max(0.1, Math.min(5, zoomLevel.value * delta))
    console.log('Zoom level:', zoomLevel.value)
}

// ========== 模型操作方法 ==========
const previewModel = () => {
    console.log('Preview model')
}

const downloadModel = () => {
    console.log('Download model')
}

const shareModel = () => {
    console.log('Share model')
}

const loadHistoryModel = (history) => {
    console.log('Load history model:', history)
    // 这里加载历史模型到画布
}

// ========== 生命周期 ==========
onMounted(() => {
    // 初始化3D画布
    if (canvasRef.value) {
        const canvas = canvasRef.value
        const context = canvas.getContext('webgl2') || canvas.getContext('webgl')
        
        if (context) {
            webglVersion.value = context instanceof WebGL2RenderingContext ? '2.0' : '1.0'
            console.log('WebGL context initialized:', webglVersion.value)
            
            // 设置画布尺寸
            const resizeCanvas = () => {
                canvas.width = canvas.offsetWidth
                canvas.height = canvas.offsetHeight
                if (context) {
                    context.viewport(0, 0, canvas.width, canvas.height)
                }
            }
            
            resizeCanvas()
            window.addEventListener('resize', resizeCanvas)
            
            // 初始化3D场景
            initializeScene(context)
        }
    }
})

const initializeScene = (gl) => {
    // 设置清除颜色为深色
    gl.clearColor(0.06, 0.06, 0.06, 1.0)
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
    
    // 这里添加3D场景初始化逻辑
    console.log('3D scene initialized')
}
</script>

<style scoped>
/* 画布样式 */
canvas {
    background: radial-gradient(ellipse at center, #1a1a1a 0%, #0f0f0f 100%);
}

/* 自定义进度条 */
:deep(.el-progress-bar__outer) {
    background: #374151 !important;
    border-radius: 10px !important;
}

:deep(.el-progress-bar__inner) {
    background: linear-gradient(90deg, #3b82f6, #06b6d4) !important;
    border-radius: 10px !important;
}
</style>